<template>
	<view class="dynamic-report-page">

		<!-- 搜索与筛选区域 -->
		<view class="filter-container">
			<!-- 搜索框 -->
			<view class="search-container">
				<!-- 搜索框 -->
				<u-search placeholder="搜索..." v-model="searchValue" class="search-input" @search="loadReportList(true)"
					@custom="loadReportList(true)"></u-search>

				<!-- 添加图标按钮 -->
				<view class="add-btn" @click="toAddPage">
					<u-icon name="plus" size="24" color="#333"></u-icon>
				</view>
			</view>

			<!-- 筛选条件 -->
			<view class="filter-row">
				<!-- 网点筛选 -->
				<view class="filter-item" @click="selectBank">
					<text class="filter-text">{{ selectedBranch }}</text>
					<u-icon name="arrow-down" size="18" color="#666"></u-icon>
				</view>

				<!-- 成员筛选 -->
				<!-- <view class="filter-item" @click="show成员Picker = true">
					<text class="filter-text">{{ selectedMember }}</text>
					<u-icon name="arrow-down" size="18" color="#666"></u-icon>
				</view> -->

				<!-- 类型筛选 -->
				<view class="filter-item" @click="show类型Picker = true">
					<text class="filter-text">{{ selectedType }}</text>
					<u-icon name="arrow-down" size="18" color="#666"></u-icon>
				</view>
			</view>
		</view>

		<!-- 网点选择器 -->
		<u-picker :show="showBankPicker" :key="componentKey" :columns="branchList" @confirm="onBranchConfirm"
			@cancel="showBankPicker = false" title="选择网点"></u-picker>

		<!-- 成员选择器 -->
		<u-picker :show="show成员Picker" :columns="memberList" @confirm="onMemberConfirm" @cancel="show成员Picker = false"
			title="选择成员"></u-picker>

		<!-- 类型选择器 -->
		<u-picker :show="show类型Picker" :columns="getAllType" @confirm="onTypeConfirm" @cancel="show类型Picker = false"
			title="选择类型"></u-picker>

		<!-- 播报列表 -->
		<scroll-view class="report-list" scroll-y :refresher-enabled="true" :refresher-triggered="refreshing"
			@refresherrefresh="onRefresh" @scrolltolower="loadMore">
			<!-- 列表项 -->
			<view v-for="(report, index) in reportList" :key="report.id" class="report-item"
				@click="viewReportDetail(report)">
				<!-- 头部信息 -->
				<view class="report-header">
					<u-avatar :src="report.avatar" size="50"
						:custom-style="{ backgroundColor: report.avatarColor }"></u-avatar>
					<view class="header-info">
						<view class="info-top">
							<text class="author-name">{{ report.createBy }}</text>
							<text style="color: #167EF6;font-size: 25rpx;">{{report.type}}</text>
							<!-- 	<u-tag :text="report.type" class="type-tag" :custom-style="{ 
                  backgroundColor: getTypeColor(report.type),
                  color: '#fff'
                }"></u-tag> -->
						</view>
						<text class="publish-time">{{ report.createTime }}</text>
					</view>
				</view>

				<!-- 内容区域 -->
				<view class="report-content">
					<text class="content-text">{{ report.broadcastContent }}</text>
				</view>

				<!-- 位置信息 -->
				<view class="report-location">
					<uni-icons type="location" size="20" color="#999"></uni-icons>
					<!-- <u-icon name="location" size="20" color="#999"></u-icon> -->
					<text class="location-text">{{ report.position }}</text>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="reportList.length === 0 && !loading">
				<!-- <u-icon name="news-o" size="90" color="#ccc"></u-icon> -->
				<text class="empty-text">暂无播报内容</text>
				<text class="empty-desc">没有找到符合条件的动态播报</text>
			</view>

			<!-- 加载更多 -->
			<view class="load-more" v-if="loading && reportList.length >= 0">
				<u-loading-icon size="24"></u-loading-icon>
				<text class="loading-text">加载中...</text>
			</view>

			<!-- 没有更多 -->
			<view class="no-more" v-if="!hasMore && reportList.length > 0">
				<text class="no-more-text">没有更多内容了</text>
			</view>
		</scroll-view>


		<tabbar :value="2"></tabbar>

	</view>
</template>

<script>
	import tabbar from "@/components/tabbar.vue"
	import {
		listDynamicBroadcast,
		getBankList
	} from '@/common/api/dynamicBroadcast.js'
	import {
		dynamicBroadcastType
	} from '@/common/jsonConfig.js'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				// 搜索与筛选
				searchKeyword: '',
				showBankPicker: false,
				show成员Picker: false,
				show类型Picker: false,
				selectedBranch: '全部网点',
				selectedMember: '全体成员',
				selectedType: '全部类型',
				bankId: null,
				searchValue: '',
				componentKey: 0,
				// 筛选数据源
				branchList: [

				],
				memberList: [
					['全体成员', '小靳', '张三', '李四', '王五', '赵六']
				],


				// 列表数据
				reportList: [],
				pageNum: 1,
				pageSize: 10,
				hasMore: true,
				loading: false,
				refreshing: false,
				currentTime: 0
			};
		},
		computed: {
			// 计算属性的 getter
			getAllType: function() {
				// `this` 指向 vm 实例
				let allType = JSON.parse(JSON.stringify(dynamicBroadcastType));

				allType[0].unshift("全部类型")
				return allType

			},

		},
		onLoad(option) {
			if (option.flg == '1') {
				uni.showToast({
					title: '发布成功',
					icon: 'success'
				});
			}
			this.getBranchList()
			// 初始加载数据
			this.loadReportList(true);
		},
		methods: {

			refreshComponent() {
				this.componentKey += 1 // 改变 key 值，导致组件重新渲染
			},
			// 返回上一页
			navigateBack() {
				uni.navigateBack();
			},
			// 添加
			toAddPage() {
				uni.navigateTo({
					url: '/pages/dtbb/dtbb_add'
				})
			},
			getCurrentTime() {
				this.currentTime = this.$moment().valueOf()
			},
			//获取网点数据
			getBranchList() {
				getBankList({

				}).then((res) => {
					if (res.code == 200)
						this.branchList = ['全部网点', ...res.data]
					this.getCurrentTime()
					// console.log(this.branchList)
				})
			},
			openBankPicker() {
				// this.refreshComponent()
				this.showBankPicker = true

			},
			selectBank() {
				uni.showActionSheet({
					itemList: this.branchList,
					success: (res) => {
						this.selectedBranch = this.branchList[res.tapIndex];
						this.pageNum = 1;
						this.loadReportList(true);
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			// 更多选项
			showMoreOptions() {
				uni.showActionSheet({
					itemList: ['刷新列表', '筛选设置', '关于播报'],
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								this.onRefresh();
								break;
							case 1:
								uni.showToast({
									title: '筛选设置',
									icon: 'none'
								});
								break;
							case 2:
								uni.showToast({
									title: '关于播报',
									icon: 'none'
								});
								break;
						}
					}
				});
			},

			// 搜索处理
			handleSearch() {
				this.pageNum = 1;
				this.loadReportList(true);
			},
			handleClearSearch() {
				this.searchKeyword = '';
				this.pageNum = 1;
				this.loadReportList(true);
			},

			// 筛选确认
			onBranchConfirm(e) {

				this.selectedBranch = e.value[0];
				this.showBankPicker = false;
				this.pageNum = 1;
				this.loadReportList(true);
			},
			onMemberConfirm(e) {
				this.selectedMember = e.value[0];
				this.show成员Picker = false;
				this.pageNum = 1;
				this.loadReportList(true);
			},
			onTypeConfirm(e) {
				this.selectedType = e.value[0];
				this.show类型Picker = false;
				this.pageNum = 1;
				this.loadReportList(true);
			},

			// 加载播报列表
			async loadReportList(isRefresh = false) {
				if (this.loading) return;
				this.loading = true;

				try {
					// 构造请求参数
					const params = {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						broadcastContent: this.searchValue,
						bankName: this.selectedBranch === '全部网点' ? '' : this.selectedBranch,
						member: this.selectedMember === '全体成员' ? '' : this.selectedMember,
						type: this.selectedType === '全部类型' ? '' : this.selectedType
					};

					// 模拟接口请求

					listDynamicBroadcast(params).then((res) => {


						if (isRefresh) {
							this.reportList = res.rows
						} else {
							this.reportList = [...this.reportList, res.rows];
						}
						this.hasMore = this.reportList.length < res.total;
						if (this.hasMore) {
							this.pageNum++;
						}
					})




				} catch (error) {
					console.error('加载失败:', error);
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				} finally {
					this.loading = false;
					this.refreshing = false;
				}
			},

			// 生成模拟内容
			getMockContent(type) {
				const contentMap = {
					'产品服务类': '分享成功服务客户的案例，展示专业能力和为客户创造的价值',
					'营销活动类': '活动结束后，分享活动成果、客户反馈和精彩瞬间',
					'客户故事类': '分享客户的好评，感谢信任和合作成果，表达对客户的感激之情，讲述客户在使用产品或服务后的成长和发展故事',
					'行业资讯类': '分享所在行业的最新新闻、趋势和政策',
					'日常感悟类': '分享工作中的经验、感悟和体会，增进与同事的交流和学习'
				};
				return contentMap[type];
			},

			// 获取类型标签颜色
			getTypeColor(type) {
				const colorMap = {
					'产品服务类': '#4cd964',
					'营销活动类': '#ff9500',
					'客户故事类': '#5856d6',
					'行业资讯类': '#007aff',
					'日常感悟类': '#af52de'
				};
				return colorMap[type] || '#999';
			},

			// 下拉刷新
			onRefresh() {
				if (!this.loading) {
					this.refreshing = true;
					this.pageNum = 1;
					this.loadReportList(true);
				} else {
					this.refreshing = false;
				}
			},

			// 触底加载更多
			loadMore() {
				if (this.hasMore && !this.loading) {
					this.loadReportList();
				}
			},

			// 查看详情
			viewReportDetail(report) {
				uni.navigateTo({
					url: `/pages/dtbb/dtbb_detail?id=${report.id}`
				});
			},

			// 跳转到发布页面
			navigateToPublish() {
				uni.navigateTo({
					url: `/pages/publishReport`
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.dynamic-report-page {
		min-height: 100vh;
		background-color: #f5f7fa;
	}

	// 筛选容器
	.filter-container {
		background-color: #fff;
		padding-bottom: 10rpx;
	}

	// 搜索栏
	.search-bar {
		padding: 16rpx 20rpx;
		position: relative;

		.add-btn {
			position: absolute;
			right: 30rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	// 筛选行
	.filter-row {
		display: flex;
		padding: 0 10rpx;
		flex-wrap: wrap;
	}

	.filter-item {
		display: flex;
		align-items: center;
		padding: 16rpx 20rpx;
		margin: 0 10rpx 10rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		font-size: 26rpx;
		color: #333;
		white-space: nowrap;

		.filter-text {
			margin-right: 8rpx;
		}
	}

	// 列表容器
	.report-list {
		height: calc(100vh - 280rpx); // 减去导航和筛选高度
	}

	// 列表项
	.report-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin: 20rpx 28rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.12), -3px 3px 8px 0 rgba(0, 0, 0, 0.12);
		transition: transform 0.2s;

		&:active {
			transform: scale(0.995);
		}
	}

	// 头部信息
	.report-header {
		display: flex;
		margin-bottom: 20rpx;

		.header-info {
			margin-left: 16rpx;
			flex: 1;

			.info-top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.author-name {
					font-size: 28rpx;
					font-weight: 500;
					color: #333;
				}

				.type-tag {
					font-size: 22rpx;
					padding: 2rpx 12rpx;
					border-radius: 12rpx;
				}
			}

			.publish-time {
				font-size: 22rpx;
				color: #999;
				margin-top: 6rpx;
				display: block;
			}
		}
	}

	// 内容区域
	.report-content {
		margin-bottom: 20rpx;

		.content-text {
			font-size: 26rpx;
			color: #666;
			line-height: 1.6;
		}
	}

	// 位置信息
	.report-location {
		display: flex;
		align-items: center;

		.location-text {
			font-size: 22rpx;
			color: #999;
			margin-left: 8rpx;
		}
	}

	// 空状态
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 150rpx 0;

		.empty-text {
			font-size: 30rpx;
			color: #999;
			margin-top: 30rpx;
		}

		.empty-desc {
			font-size: 26rpx;
			color: #ccc;
			margin-top: 15rpx;
		}
	}

	// 加载状态
	.load-more,
	.no-more {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		color: #999;
		font-size: 26rpx;
	}

	.loading-text {
		margin-left: 15rpx;
	}

	.search-container {
		display: flex;
		align-items: center;
		padding: 16rpx;
		gap: 12rpx;
	}

	.search-input {
		flex: 1;
		/* 让搜索框占满剩余空间 */
	}

	.add-btn {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* 可根据需要添加背景或圆角 */
		/* background-color: #f5f5f5;
  border-radius: 8rpx; */
	}
</style>